//加载公共样式
require('../../assets/css/index.less')

//加载自己的样式
require('./sports-data.less')

//引入echarts
const echarts = require('echarts')

//引入dom.js
const dom = require('../../utils/dom.js')

//服务器地址
const API = 'http://fitness.h5.itsource.cn:3701'

////引入axios工具函数
const request = require('../../utils/request')

window.onload = () => {
    //渲染柱状图
    function renderBar() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('bar'));
        console.log(myChart);

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '近七天运动时长',
                left: 10,
                top: 5
            },
            tooltip: {},

            xAxis: {
                data: ['11-5', '11-6', '11-7', '11-8', '11-9', '11-10']
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [50, 120, 130, 60, 75, 125]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

    }

    //初始化调用
    renderBar()

    //渲染饼图
    function renderPie() {
        //1 创建实例
        const myChart = echarts.init(document.querySelector('#pie'))

        //2 配置项
        let option = {
            title: {
                text: '运动分类',
                left: 15,
                top: 15,
            },
            tooltip: {
                trigger: 'item',
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                top: 'middle',
            },
            series: [{
                name: 'Access From',
                type: 'pie',
                radius: '50%',
                data: [{
                        value: 40,
                        name: '训练',
                        label: {
                            // show: false,
                            position: 'inside',
                            color: '#fff',
                            formatter: '{c}%',
                        },
                        itemStyle: {
                            color: '#58bb92',
                        },
                    },
                    {
                        value: 25,
                        name: '跑步',
                        label: {
                            position: 'inside',
                            color: '#fff',
                            formatter: '{c}%',
                        },
                        itemStyle: {
                            color: '#736171',
                        },
                    },
                    {
                        value: 35,
                        name: '骑行',
                        label: {
                            position: 'inside',
                            color: '#fff',
                            formatter: '{c}%',
                        },
                        itemStyle: {
                            color: '#ee5c43',
                        },
                    },
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)',
                    },
                },
            }, ],
        }

        //3 导入配置
        myChart.setOption(option)
    }

    renderPie()

    //获取用户信息
    function getUserInfo() {
        request.get('/api/user/info').then(res => {
            console.log(res.data);
            //1 解构数据
            let { errno, data } = res.data
                //2 判断
            if (errno === 0) {
                //3 处理业务逻辑
                dom.$('#avatar').src = API + data.imgUrl
            }
        })
    }




    //获取运动数据    
    function getSportsData() {
        request.get('/api/exercise').then(res => {
            console.log(res.data);
            //1 解构数据
            let { errno, data } = res.data
                //2 判断
            if (errno === 0) {
                //3 处理业务逻辑
                dom.$('#sumSports').textContent = data.sum7Duration
                dom.$('#weekSoprts').textContent = data.sum7Calorie
                dom.$('#qianka').textContent = data.sum7Calorie
                dom.$('#leiji').textContent = data.sum7Duration
                dom.$('#day').textContent = data.sum7Meter

            }
        })

    }

    //初始化获取用户信息
    getUserInfo()

    //初始化运动数据
    getSportsData()

    //获取数据函数
    function getData() {
        request.get('/api/exercise').then(res => {
            //解构数据
            let { errno, data } = res.data
                //判断
            if (errno === 0) {
                //处理数据 & 渲染视图
                console.log('data :>> ', data)
                    //抽离x轴数据
                let xData = data.days.map(v => v.date.slice(5))

                //第一个数组
                // let o1 = {
                //   type: 'bar',
                //   name: 'count',
                //   data: data.days.map(v => v.count),
                // }
                // let o2 = {
                //   type: 'bar',
                //   name: 'sumCalorie',
                //   data: data.days.map(v => v.sumCalorie),
                // }
                // let o3 = {
                //   type: 'bar',
                //   name: 'sumDuration',
                //   data: data.days.map(v => v.sumDuration),
                // }
                // let o4 = {
                //   type: 'bar',
                //   name: 'sumMeter',
                //   data: data.days.map(v => v.sumMeter),
                // }
                // let series = [o1, o2, o3, o4]

                //抽离name
                let arr = ['count', 'sumCalorie', 'sumDuration', 'sumMeter']
                let series = arr.map(name => ({
                    name: name,
                    type: 'bar',
                    data: data.days.map(v => v[name]),
                }))

                //渲染柱状图
                renderBar(series, xData)
            }
        })
    }


    //初始化获取数据
    getData()

}